<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jsEvents</title>
  </head>
  <body>
    <div
      style="
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        left: 0;
        top: 0;
      "
    ></div>
    <script>
      /*
        添加事件
        1.element.onxx = function(){} 只能绑定一个函数
        2.obj.addEventListener(事件类型，处理函数，false) 可以绑定多个函数
        3.obj.attachEvent(on+事件类型，处理函数) ie特有
        */
      /*
    解除事件
       1.element.onxxx = false/null
       2.obj.removeEventListener(事件类型，处理函数，false)
       3.obj.attachEvent(on+事件类型，处理函数)             
       若绑定匿名函数则无法解除
       */

      /*事件冒泡*/
      // 结构上嵌套关系的元素，会存在事件冒泡
      //自子元素冒泡至父元素
      /*
        <div class="wrapper">
          <div class="content">
              <div class="box"></div>
          </div>
      </div>
      //box -> content -> wrapper
      */
      //取消 事件冒泡
      //  事件处理对象event
      //  event.stopPropagation
      //  event.cancelBubble = true

      /*事件捕获*/
      // 结构上嵌套关系的元素，会存在事件冒泡
      //自父元素元素捕获至子元素
      //addEventListener(事件类型，处理函数，true) 设置为捕获事件
      /*
        <div class="wrapper">
          <div class="content">
              <div class="box"></div>
          </div>
      </div>
      //wrapper -> content -> box
      */

      /*阻止默认事件*/
      // return false  只适用于onxx = function(){}
      // event.preventDefault()
      // event.returnValue = false

      /*鼠标事件*/
      // click mousedown mousemove mouseup contextmenu mouseover mouseover  mouseout mouseleave
      // 事件对象 中button 0:鼠标左键点击 1:鼠标滚轮 2:鼠标右键 
      // 通过mousedown mouseup 来区别鼠标左右键
      //click = mousedown + mouseup  通过鼠标左键按下和抬起的时间间隔来区别 mousedown和click

      /*拖拽*/
      var div = document.getElementsByTagName("div")[0];


      div.onmousedown = (e) => {
        div.onmousemove = (e) => {
          var event = e || window.event;
          div.style.left = parseInt(event.pageX) - 50 + "px";
          div.style.top = parseInt(event.pageY) - 50 + "px";
        };
      };
      div.onmouseup = () =>{
        div.onmousemove = null
      }

      /*键盘事件*/
      //keydown keyup keypress
      //keydown => keypress => keyup
      //keydown可相应任何按键 keypress只能响应字符并返回ASCII码
    </script>
  </body>
</html>
